<script setup lang="ts">
import { ref, computed, onMounted, h } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { NDataTable, NText, NButton, NCard, NInput } from 'naive-ui'
import type { DataTableColumns, DataTableBaseColumn } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { FORM_SAVE,FORM_ADD,FORM_SAVE1 } from '../../service/apis/from';

const router = useRouter()
const route = useRoute()


console.log(route);


const qd: any = route.query.data
const str = decodeURIComponent(qd)
const qdArr = JSON.parse(str)
const qdlist = qdArr[5]

// interface RowData {
//   key: number
//   name: string
//   age: string
//   address: string
// }



const columns: any = ref(
  [
    {
      type: 'selection',
      fixed: 'left'
    },
    // {
    //   title: 'age1',
    //   key: 'age1'
    // },
    // {
    //   title: 'a',
    //   key: 'a'
    // },
    //  { 
    //   title: '操作',
    //   key: 'actions',
    //   width: 100,
    //   minWidth: 100,
    //   titleColSpan:1,
    //   render(row:any) {
    //     return h(NButton, {size:'small', type:"error",onClick: () => delRow(row)},{ default: () => '删除'}) 
    //     }
    //   }
  ]
)
const data = ref<any>([

  // {
  // age1: '1',
  // key: 0,
  // name: 'John Brown',
  // age: '32',
  // address: 'New York No. 1 Lake Park'
  // },
  // {
  //   age1: '32',
  //   // key: 1,
  //   // name: 'Jim Green',
  //   // age: '42',
  //   // address: 'London No. 1 Lake Park'
  // },
  // {
  //   age1: '3112',
  //   key: 2,
  //   name: 'Joe Black',
  //   age: '32',
  //   address: 'Sidney No. 1 Lake Park'
  // }
])

for (let index = 0; index < qdlist.length; index++) {

  console.log(qdlist[index]['名称']);
  columns.value.push({
    title: qdlist[index]['名称'],
    key: qdlist[index]['名称'],
    render(row:any, index:any) {
      // console.log(qdlist[index]['名称']);
      
          return h(NInput, {
            value: row.name,
            onUpdateValue(v) {
              data.value[index].name = v
            }
          })
        }
  })
}

// const renderCell = (value: any, rowData: object, column: DataTableBaseColumn) => {
//   console.log(value, rowData, column);

//   if (!value) {
//     return h(NInput, { type: "text", placeholder: '请填写内容' }, { default: () => '请填写内容' })
//     //h(NText, { depth: 1 }, { default: () => '未填写' })
//   }
//   return value
//   //h(NInput, { depth: 3 }, { default: () => '未填写' })
// }

function save() {
  console.log(data.value);

}

function randomString(e:number) {    
    e = e || 32;
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890",
    a = t.length,
    n = "";
    for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
    console.log(n);
    
    return n
}



function addRow() {
  let p: any = {key:0}
  data.value.push(p)
}
function delRow(row: any) {
  console.log(row);

}

const rowKey = (row: any) => {
console.log('row',row);
  // row.id;

}
function checkedrowkeys(params: any) {

}
const selectedRowKeys = ref([])

const handleCheck = (rowKeys: any) => {
  console.log(rowKeys);

  selectedRowKeys.value = rowKeys;
};

</script>
<template>
  <baseCard>
    <div style="margin-bottom: 5px;">
      <n-button type="default" size='small' @click="addRow" style="margin-right: 5px;">添加</n-button>
      <n-button type="error" size='small' @click="delRow" style="margin-right: 5px;">删除</n-button>
      <n-button type="primary" size='small' @click="save">保存</n-button>
      <n-button type="primary" size='small' @click="randomString(64)">保存11</n-button>
      
    </div>
    <n-data-table :row-Key="rowKey" :columns="columns" :data="data"  virtual-scroll
      max-height="500" :checked-row-keys='selectedRowKeys' @update:checked-row-keys="handleCheck" />
  </baseCard>
</template>

<style src="./index.scss" scoped></style>
